<template>
	<view class="box">
		<view class="list-top">
			<view class="date">时间</view>
			<view class="caoliao">消耗材料</view>
			<view class="user-name">用户</view>
			<view class="bianhao">柜子编号</view>
			<view class="type">状态</view>
		</view>
		<view class="list-bottom" ref="listBottom">
			<scroll-view scroll-y="true" class="scroll-list" @scrolltolower="$emit('onDropLoad')">
				<block v-for="(item,index) in clList" :key="index">
					<view class="list-item" v-if="item.datetime!==0" @click="$emit('onClickComfig',index)">
						<view class="item-date">{{item.operTime}}</view>
						<view class="item-cailao">{{item.itemTypeName}}</view>
						<view class="item-user">{{item.operatorName}}</view>
						<view class="item-biaohao">{{item.seatCode}}</view>
						<view v-if="item.type==1" class="item-type">上架</view>
						<view v-if="item.type==2" class="item-type">出柜</view>
						<view v-if="item.type==3" class="item-type">入柜</view>
					</view>
					<view v-else class="list-item"></view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			clList: {
				type: Array,
				required: true
			}
		}
	}
</script>

<style scoped lang="less">
	.active{
		color: red;
	}
	.box{
		// height: 100%;
		height: 70vh;
		position: fixed;
	}
	.list-top{
		// height: 80rpx;
		height: 6vh;
		background: #57A6FF;
		border-radius: 32rpx 32rpx 0 0;
		font-size: 9rpx;
		color: #FFFFFF;
		display: flex;
		text-align: center;
		align-items: center;
		font-weight: 400;
		font-size: 36rpx;
		.date{
			// width: 630rpx;
			width: 22vw;
		}
		.caoliao{
			// width: 300rpx;
			// margin-right: 300rpx;
			width: 10.5vw;
			margin-right: 10.5vw;
		}
		.user-name{	
			// width: 380rpx;
			width: 13vw;
		}
		.bianhao{
			// width: 388rpx;
			width: 13.5vw;
		}
		.type{	
			// width: 248rpx;
			width: 8.5vw;
		}
	}
	.list-bottom{
		// height: 980rpx;
		height: 64vh;
		background: #FFFFFF;
		border-radius: 0 0 40rpx 40rpx;
		box-sizing: border-box;
		// overflow-y: auto;
		// -webkit-overflow-scrolling: touch;
		// //当手指从触摸屏移开，会保持滑动一段距离
		// -webkit-overflow-scrolling: auto; // ios默认属性
		// //当手指从触摸屏移开，滚动立即停止
		.list-item{
			height: 100rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-weight: 400;
			font-size: 40rpx;
			&:nth-child(2n-1){
				background: #F1F9FF;
			}
			.item-date{	
				// width: 630rpx;
				width: 22vw;
			}
			.item-cailao{		
				// width: 300rpx;
				// margin-right: 300rpx;
				width: 10.5vw;
				margin-right: 10.5vw;
			}
			.item-user{				
				// width: 380rpx;
				width: 13vw;
			}
			.item-biaohao{				
				// width: 388rpx;
				width: 13.5vw;
			}
			.item-type{
				// width: 248rpx;
				width: 8.5vw;
			}
		}
	}
	.scroll-list{
		height: 100%;
	}
</style>
